$(function () {
    var editCarouselData; // 选中的行

    $('#jqGrid').jqGrid({
        colModel: [
            {label: 'id', name: 'carouselId', key: true, hidden: true},
            {label: '轮播图(点击放大)', name: 'carouselUrl', width: 150, formatter: carouselUrlFormatter},
            {label: '跳转链接', name: 'redirectUrl', width: 250, formatter: redirectUrlFormatter},
            {label: '修改时间', name: 'updateTime'},
        ],

        autowidth: true, // 填充宽度到父容器
        height: 500,
        styleUI: 'Bootstrap', // 使用Bootstrap样式渲染表格
        multiselect: true, // 启用多选模式，允许用户选择多行
        rowNum: 10, // 指定初始每页显示的行数为10行
        rowList: [10, 20, 50], // 设置用户可以选择的每页行数选项
        emptyrecords: '无记录（可刷新重试）',

        url: '/admin/indexCarousels/list',
        datatype: 'json',
        jsonReader: {
            root: 'data.list',
            total: 'data.totalPage',
            records: 'data.totalCount',
        },

        pager: "#jqGridPager", // 指定分页栏的容器，分页栏的内容将显示在具有该ID的元素中
        // 定义分页事件处理函数
        onPaging: function (pgButton) {
            // 检查用户点击的按钮是否是 "user"，即跳转按钮
            if (pgButton === 'user') {
                let pageInput = $(".ui-pg-input", "#gbox_" + this.id); // 获取页码输入框
                let pageValue = pageInput.val(); // 获取输入框中的值
                // 判断页码合理
                if (pageValue > $(this).jqGrid('getGridParam', 'lastpage')) {
                    pageInput.val($(this).jqGrid('getGridParam', 'lastpage'));
                }
            }
        },
    });

    // 窗口变化时调整宽度
    $(window).resize(function () {
        $("#jqGrid").setGridWidth($(".card-body").width());
    });

    $('#save').click(function () {
        var uploadFile = $('#upload').prop("files")[0]; // 卡了好久
        var redirectUrl = $('#redirectUrl').val();
        if (uploadFile === undefined) {
            toastr.warning('未选择图片！', '警告', {timeOut: 5000});
            return;
        } else if (!uploadFile.type.startsWith('image/')) {
            toastr.warning('请选择图片类型文件！', '警告', {timeOut: 5000});
            return;
        } else if (isEmpty(redirectUrl)) {
            toastr.warning('跳转链接不能为空！', '警告', {timeOut: 5000});
            return;
        }
        var data = new FormData();
        data.append("uploadFile", uploadFile);
        data.append("redirectUrl", redirectUrl);
        $.ajax({
            type: 'POST',
            processData: false,  // 注意：让jQuery不要处理数据
            contentType: false,  // 注意：让jQuery不要设置contentType
            url: '/admin/indexCarousels/save',
            data: data,
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('增加成功！', {timeOut: 3000});
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    });

    // 编辑按钮监听
    $('#edit').click(function () {
        // 获取选中行的行号数组
        var selectedRows = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
        if (selectedRows.length === 0) {
            toastr.warning('未选中记录！', '警告', {timeOut: 5000});
            return;
        } else if (selectedRows.length > 1) {
            toastr.warning('只能同时编辑一个轮播图！', '警告', {timeOut: 5000});
            return;
        }
        // 获取选中行的数据
        editCarouselData = $("#jqGrid").jqGrid("getRowData", selectedRows[0]);
        // 显示弹框
        $('#modal-edit').modal('show');
        // 显示图片和原跳转链接
        // 原数据都被包装了，所以得过滤；创建一个临时的div元素，将HTML字符串插入其中
        var tempDiv = $("<div>").html(editCarouselData.carouselUrl + editCarouselData.redirectUrl);
        // 提取原始的URL
        var originalImg = tempDiv.find("img").attr("src");
        var originalUrl = tempDiv.find("a").attr("href");
        $('#editImage').attr("src", originalImg);
        $('#editRedirectUrl').val(originalUrl);
    });

    // 编辑确认按钮监听
    $('#editConfirm').click(function () {
        var editRedirectUrl = $('#editRedirectUrl').val();
        if (isEmpty(editRedirectUrl)) {
            toastr.warning('跳转链接不能为空！', '警告', {timeOut: 5000});
            return;
        }
        var data = {
            carouselId: editCarouselData.carouselId,
            carouselUrl: $('#editImage').attr('src'),
            redirectUrl: editRedirectUrl
        };
        $.ajax({
            type: 'PUT',
            url: '/admin/indexCarousels/update',
            contentType: "application/json", // 用json了一定要这个
            data: JSON.stringify(data),
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('修改成功！', {timeOut: 3000});
                    $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    });

    // 删除确认按钮监听
    $('#delete').click(function () {
        var selectedRows = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
        if (selectedRows.length === 0) {
            toastr.warning('未选中记录！', '警告', {timeOut: 5000});
            return;
        }
        $.ajax({
            type: 'PUT',
            url: '/admin/indexCarousels/delete',
            contentType: "application/json", // 用json了一定要这个
            data: JSON.stringify(selectedRows),
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('删除成功！', {timeOut: 3000});
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    });
});

function redirectUrlFormatter(cellvalue) {
    return '<a target="_blank" href="' + cellvalue + '">' + cellvalue + '</a>';
}

function carouselUrlFormatter(cellvalue) {
    return '<img src="' + cellvalue + '" height="50" width="50" alt="图片显示" onclick="showLargeImage(\'' + cellvalue + '\')"/>';
}

function showLargeImage(url) {
    $('#largeImage').attr("src", url);
    $('#modal-img').modal('show');
}